<template>
  <div class="car-page">
    <el-card class="card">
      <el-form ref="form" label-width="80px" class="flex-form">
        <el-form-item label="车辆类型:" class="flex-item">
          <el-select v-model="queryParams.truckTypeId" placeholder="请选择">
            <el-option
              v-for="item in carList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="车牌号码:" class="flex-item">
          <el-input v-model="queryParams.licensePlate" placeholder="请输入车牌号码" />
        </el-form-item>

        <el-form-item class="flex-item">
          <el-button
            type="primary"
            size="medium"
            class="query-btn"
            @click="search"
          >搜索
          </el-button>
          <el-button
            type="primary"
            size="medium"
            class="query-list"
            @click="reset"
          >重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <div class="centre">
      <el-tabs v-model="queryParams.workStatus" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="2" />
        <el-tab-pane label="启用" name="1" />
        <el-tab-pane label="停用" name="0" />
      </el-tabs>
    </div>

    <el-card class="card-3">
      <el-button
        type="primary"
        size="medium"
        class="butCard"
        @click="addEnterprise"
      >新增车辆</el-button>
      <!-- 表格 -->
      <template>
        <el-table class="table" style="width: 100%" :data="list" :header-cell-style="{background:'#f8faff'}">
          <el-table-column
            prop="id"
            type="index"
            label="序号"
            width="100"
            :index="indexMethod"
          />
          <el-table-column prop="licensePlate" label="车牌号码" />
          <el-table-column prop="truckTypeName" label="车辆类型" />
          <el-table-column prop="driverNum" label="司机数量" />
          <el-table-column prop="workStatus" label="车辆状态">
            <template v-slot="{row}">
              <el-button v-if="row.workStatus === 1" type="text" style="color:black" class="dot">可用</el-button>
              <el-button v-else type="text" style="color:black" class="dots">停用</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="deviceGpsId" label="GPS设备ID" />
          <el-table-column prop="allowableLoad" label="实载重量(T)" />
          <el-table-column prop="allowableVolume" label="实载体积(方)" />
          <el-table-column label="操作" width="200">
            <template #default="{row}">
              <el-button type="text" @click="detail(row)">查看详情</el-button>
              <el-button
                v-if="row.workStatus === 1"
                type="text"
                style="color:red"
                :disabled="row.workStatus === 0"
                @click="stopUse()"
              >停用</el-button>
              <el-button
                v-else-if="row.workStatus === 0"
                :disabled="row.workStatus === 1"
                type="text"
                @click="stareUse()"
              >启用</el-button>
              <el-button type="text" @click="editEnterprise(row.id)">配置司机</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页器 -->
      <el-row type="flex" justify="center" align="middle">
        <el-pagination
          class="pagination"
          :current-page="queryParams.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </el-row>
    </el-card>
    <add-enterprise ref="addEnterprise" :title="title" :is-show-dialog.sync="isShowDialog" @refreshvehicle="getEnterpriselist" />
    <!-- 配置司机提示框 -->
    <el-dialog title="车辆配置" :visible.sync="outerVisible">
      <span>配置司机需要满足以下条件：</span>
      <el-row style="margin: 20px;"><span>1.车辆信息已完整</span><span style="margin-left: 200px;">2.车辆无未完成运输任务</span></el-row>
      <el-dialog
        width="50%"
        title="配置司机"
        :visible.sync="innerVisible"
        append-to-body
      >
        <driver-model
          :undrever-id="UndreverId"
          :inner-visible="innerVisible"
        />
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false">取 消</el-button>
        <el-button type="primary" @click="innerConture">确定</el-button>
      </div>
    </el-dialog>
    <!-- 启用模态框 -->
    <el-dialog
      title="车辆启用"
      :visible.sync="stareVisible"
      width="50%"
      :before-close="handleClose"
    >
      <span>确定要启用吗？车辆启用需满足以下条件：</span>
      <el-row style="margin: 20px;"><span>1.车辆信息已完善</span><span style="margin-left: 200px;">2.绑定司机>=2,且有排班</span></el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="stareVisible = false">取 消</el-button>
        <el-button type="primary" @click="stareVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 禁用模态框 -->
    <el-dialog
      title="车辆停用"
      :visible.sync="stopVisible"
      width="50%"
      :before-close="handleClose1"
    >
      <span>确定要停用吗？车辆停用需满足以下条件：</span>
      <el-row style="margin: 20px;"><span>1.车辆当前无运输任务</span><span style="margin-left: 200px;">2.车辆无关联运输路线</span></el-row>
      <span style="color: gold;">注：停用后司机将无法自动解除绑定</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="stopVisible = false">取 消</el-button>
        <el-button type="primary" @click="stopVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <div class="footer">
      <span>江苏传智播客教育科技股份有限公司</span>
      <span> 版权所有Copyright 2006-2022 All Rights Reserved</span>
      <span> 苏ICP备16007882号-11</span>
    </div>
  </div>
</template>

<script>
import { getEnterpriselist } from '@/api/enterprise'
import { getVehicleList } from '@/api/vehicle'
import { serialNumber } from '@/utils/page'
import DriverModel from '@/views/park/enterprise/components/add-driver.vue'
import AddEnterprise from '@/views/park/enterprise/components/add-enterprise.vue'
export default {
  name: 'CarPage',
  components: {
    AddEnterprise,
    DriverModel
  },
  data() {
    return {
      // 禁用模态框
      stopVisible: false,
      // 启用模态框
      stareVisible: false,
      // 配置司机的id
      UndreverId: '',
      // 点击配置司机显示
      outerVisible: false,
      innerVisible: false,
      // 表格列表数据
      list: [],
      // 查询参数
      queryParams: {
        licensePlate: '', // 车牌号码
        truckTypeId: '', // 车辆类型id
        workStatus: '', // 状态--状态 0：禁用 1：正常
        // 页码
        page: 1,
        // 一页多少条
        pageSize: 10
      },
      // 总条数
      counts: null,
      carList: [],
      // 弹窗标题
      title: '新增车辆',
      // 是否显示新增或编辑的弹窗
      isShowDialog: false
    }
  },
  async created() {
  // 获取车辆分页数据
    await this.getEnterpriselist()
    // 获取车型列表
    const result = await getVehicleList()
    this.carList = result.data
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    handleClose1(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    // 停用
    stopUse() {
      this.stopVisible = true
    },
    stareUse() {
      this.stareVisible = true
    },
    // 计算序号
    indexMethod(index) {
      return serialNumber(
        index,
        this.queryParams.page,
        this.queryParams.pageSize
      )
    },
    // 查询车辆分页数据
    async getEnterpriselist() {
      const result = await getEnterpriselist(this.queryParams)
      console.log(result)
      // 更新列表数据
      this.list = result.data.items
      // 更新条数
      this.counts = Number(result.data.counts) // total要的是数字型
    },
    // 新增车型
    addEnterprise() {
      this.title = '新增车型'
      this.isShowDialog = true
    },
    // 模糊搜索
    async search() {
      await this.queryParams.items
      this.getEnterpriselist(this.queryParams)
    },
    // 点击配置司机
    editEnterprise(id) {
      this.outerVisible = true
      this.UndreverId = id
      console.log(id)
    },
    // 跳转详情页面
    detail(row) {
      console.log(row)
      this.$router.push({ path: 'pas',
        query: { id: row.id, formUrlName: '司机管理' }})
    },
    // 点击配置司机的确认按钮事件
    innerConture() {
      this.innerVisible = true
      console.log(this.UndreverId)
    },
    handleClick(tab, event) {
      if (tab.name === '2') {
        this.vehicleDataParams.workStatus = ''
      }
      this.getVehicleLists()
      // console.log(event)
    },
    // 页容量改变
    handleSizeChange(pageSize) {
      this.queryParams.pageSize = pageSize
      // 调用更新接口
      this.getEnterpriselist()
    },
    // 页码切换
    handlePageChange(page) {
      this.queryParams.page = page
      // 调用更新接口
      this.getEnterpriselist()
    },
    // 重置
    async reset() {
      await this.queryParams.items
      this.queryParams.licensePlate = '' // 车牌号码
      this.queryParams.truckTypeId = '' // 车辆类型id
      this.getEnterpriselist()
    }
  }
}
</script>
<style lang="scss" scoped>
.car-page {
  .card {
    height: 120px;
    margin: 20px 20px;
    padding: 20px 20px;
.flex-form {
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  flex: 1;
  margin-right: 10px; /* 可根据需要调整间距 */
}
    // 表格
    .table {
      margin-top: 20px;
    }

    // 分页器
    .pagination {
      margin-top: 20px;
    }

  }
   .centre{
    margin:0 20px;
    margin-top: 30px;
    height: 40px;
    background-color: #fffcfd;
  }

  .dot{
    &::before{
      content: '';
      position: absolute;
      top: 50%;
      transform: translate(0,-50%);
      left: -2%;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background-color: #1dc779;
    }
  }
   .dots{
    &::before{
      content: '';
      position: absolute;
      top: 50%;
      transform: translate(0,-50%);
      left: -2%;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background-color: #dd001b;
    }
  }
  .card-2{
    display: flex;
    margin: 20px 20px;
    padding: 0px 20px;
  }
  .textBtn{
   flex: 1;
   margin: 0 20px;
   font-size: 15px;
   color: black;
  }
  .card-3{
   margin: 20px 20px;
    padding: 0px 20px;
  }
  .butCard{
    margin-bottom: 20px;
    background-color: rgb(227, 66, 66);
    border-color: rgba(0, 0, 0, 0);
  }
  .query-btn{
    background-color: rgb(227, 66, 66);
    border-color: rgba(0, 0, 0, 0);

  }
  .query-list{
    color: black;
    background-color:white;
    border-color:black
  }
   .footer{
    margin-top: 50px;
    text-align: center;
    color: rgb(180, 180, 180);
    span{
      margin-right: 5px;
    }
  }
   }
</style>
